import React from 'react';
import style from './style.less';
import echarts from 'echarts';

class LineTable extends React.Component {

    constructor( props ) {
        super( props )
        this.state = {
            table: '',
            timer:''
        }
    }

    resizeEvent = () => {
        if(this.state.timer){
            clearTimeout(this.state.timer);
        }

        const timer = setTimeout(() => {
            this.state.table.resize();
        }, 200);

        this.setState({
            timer: timer
        })
    }

    componentDidMount() {

        const table = echarts.init( document.getElementById( 'lineTable' ) );

        table.setOption( {
            xAxis: {
                type: 'category',
                data: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ]
            },
            yAxis: {
                type: 'value'
            },
            series: [ {
                data: [ 820, 932, 901, 934, 1290, 1330, 1320 ],
                type: 'line'
            } ]
        } );

        this.setState( {
            table: table
        }, () => {
            this.state.table.resize();
        } );


        window.addEventListener( 'resize', this.resizeEvent, false )

    }

    componentWillUnmount() {
        window.removeEventListener( 'resize', this.resizeEvent, false );
    }

    render() {
        return (
            <div className={style.lineTable}>
                <span className={style.title}>线形图</span>
                <div className={style.table} id='lineTable'></div>
            </div>
        )
    }
}

export default LineTable;